<template>
  <div class="subapp-container">
    <div id="subapp-container"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount } from 'vue';
import { loadMicroApp, MicroApp } from 'qiankun';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'SubApp',
  setup() {
    let microApp: MicroApp | null = null;
    const route = useRoute();

    const getPort = (appName: string) => {
      switch (appName) {
        case 'app1':
          return '8001';
        case 'app2':
          return '8002';
        case 'app3':
          return '8003';
        default:
          return '8001';
      }
    };

    onMounted(() => {
      console.log('执行', route);
      const appName = route.path.split('/')[1]; // 获取app1或app2或app3
      // 加载对应的子应用
      microApp = loadMicroApp({
        name: appName,
        entry: process.env.NODE_ENV === 'development' 
          ? `//localhost:${getPort(appName)}`
          : `/${appName}`,
        container: '#subapp-container',
      });
    });

    onBeforeUnmount(() => {
      if (microApp) {
        microApp.unmount();
      }
    });

    return {};
  }
});
</script>

<style lang="less" scoped>
.subapp-container {
  width: 100%;
  height: 100%;
  #subapp-container {
    width: 100%;
    height: 100%;
  }
}
</style> 